<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-icon" data-background-color="rose">
            <i class="material-icons">assignment</i>
          </div>
          <div class="card-content">
            <h4 class="card-title">{{userJobRolesUserName}}</h4>
          </div>
          <div class="card-content">
            <!-- Main row -->
            <div class="box-header">
              <div class="box-tools pull-right form-inline">
                <span class="input-group hidden-xs hidden-sm" style="width:200px">
                  <input type="text" class="form-control" placeholder="请输入关键词" [(ngModel)]="minSearchKeywords">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="button" (click)="clearMinKeywords()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="清空关键词">
                      <i class="fa fa-eraser"></i>
                    </button>
                    <button class="btn btn-default btn-sm" type="button" (click)="displayMinData()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="搜索">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </span>
                <button type="button" class="btn btn-info btn-sm" (click)="displayMinData()" data-container="body" data-toggle="popover"
                  data-trigger="hover" data-placement="top" data-content="刷新">
                  <i class="fa fa-refresh"></i>
                </button>
                <button *ngIf="showDeleteUserJobRoles" type="button" class="btn btn-danger btn-sm" (click)="toDeleteUserJobRoles()">删除选中角色</button>
              </div>
            </div>
            <!-- /.box-header -->
            <table class="table">
              <thead class="text-primary">
                <tr>
                  <th style="width:20px">
                    <input type="checkbox" (click)="checkAllUserJobRoles()" [(ngModel)]="checkedAllUserJobRoles">
                  </th>
                  <th (click)="minSort('jobId')" [class.sorting]="minOrderBy!='jobId'" [class.sorting_asc]="minOrderBy=='jobId'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='jobId'&&minOrderType=='desc'">身份id</th>
                  <th (click)="minSort('userId')" [class.sorting]="minOrderBy!='userId'" [class.sorting_asc]="minOrderBy=='userId'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='userId'&&minOrderType=='desc'">用户id</th>
                  <th (click)="minSort('username')" [class.sorting]="minOrderBy!='username'" [class.sorting_asc]="minOrderBy=='username'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='username'&&minOrderType=='desc'">用户名</th>
                  <th (click)="minSort('realname')" [class.sorting]="minOrderBy!='realname'" [class.sorting_asc]="minOrderBy=='realname'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='realname'&&minOrderType=='desc'" class="hidden-xs">真实姓名</th>
                  <th (click)="minSort('nickname')" [class.sorting]="minOrderBy!='nickname'" [class.sorting_asc]="minOrderBy=='nickname'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='nickname'&&minOrderType=='desc'" class="hidden-xs hidden-sm">昵称</th>
                  <th (click)="minSort('email')" [class.sorting]="minOrderBy!='email'" [class.sorting_asc]="minOrderBy=='email'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='email'&&minOrderType=='desc'" class="hidden-xs hidden-sm">电子邮箱</th>
                  <th (click)="minSort('cellphone')" [class.sorting]="minOrderBy!='cellphone'" [class.sorting_asc]="minOrderBy=='cellphone'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='cellphone'&&minOrderType=='desc'" class="hidden-xs hidden-sm">手机</th>
                  <th (click)="minSort('isLocked')" [class.sorting]="minOrderBy!='isLocked'" [class.sorting_asc]="minOrderBy=='isLocked'&&minOrderType=='asc'"
                    [class.sorting_desc]="minOrderBy=='isLocked'&&minOrderType=='desc'" class="hidden-xs hidden-sm hidden-md">是否锁定</th>
                  <th class="hidden-xs hidden-sm hidden-md">所属集团</th>
                  <th class="hidden-xs hidden-sm hidden-md">组织机构</th>
                  <th class="hidden-xs hidden-sm hidden-md">职位</th>
                  <th class="hidden-xs hidden-sm hidden-md">角色</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let user of jobUserRoles">
                  <td style="width:20px">
                    <input type="checkbox" (click)="checkUserJobRole()" value="{{user.otherResults.id}}" class="job-list">
                  </td>
                  <td>{{user.otherResults.jobId}}</td>
                  <td>{{user.userId}}</td>
                  <td>{{user.username}}</td>
                  <td class="hidden-xs">{{user.realname}}</td>
                  <td class="hidden-xs hidden-sm">{{user.nickname}}</td>
                  <td class="hidden-xs hidden-sm">{{user.email}}</td>
                  <td class="hidden-xs hidden-sm">{{user.cellphone}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{user.isLocked}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.groupName}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.orgName}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.positionName}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.roleName}}</td>
                </tr>
              </tbody>
            </table>
            <!-- /.box-body -->
            <div class="box-footer clearfix no-border">
              <div class="pull-right">
                <app-pagination [pageNo]="minPageNo" [pageSize]="minPageSize" [totalPages]="minTotalPages" [total]="minTotal" (pageNoChange)="goToMinPage($event)"
                  (pageSizeChange)="setMinPageSize($event)"></app-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>